<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		#tutorial {
			border: 1px solid black;
			margin: 50px 500px;
		}
	</style>
	<body>
		<canvas id="tutorial" width="300" height="300"></canvas>
		<script type="text/javascript">
			var sun = new Image();
			var moon = new Image();
			var earth = new Image()

			function init() {
				sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
				moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
				earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
				window.requestAnimationFrame(draw);
			}
			
			window.onload = function() {
				init();
			}
			let draw = function() {
				let canvas = document.getElementById("tutorial");
				if (!canvas.getContext("2d")) return false;
				let ctx = canvas.getContext("2d");
				ctx.clearRect(0, 0, 300, 300);
				ctx.fillStyle = 'rgba(0,0,0,0.4)';
				ctx.strokeStyle = 'rgba(0,153,255,0.4)';
				ctx.save();
				ctx.translate(150, 150);
				ctx.drawImage(sun, -150, -150, 300, 300);
				ctx.beginPath();
				ctx.arc(0, 0, 105, 0, Math.PI * 2, false); // Earth orbit
				ctx.stroke();
				let timer = new Date();
				ctx.rotate(2 * Math.PI / 60 * timer.getSeconds() + 2 * Math.PI / 60000 * timer.getMilliseconds());
				ctx.translate(105, 0);
				ctx.drawImage(earth, -12, -12);
				ctx.beginPath();
				ctx.arc(0,0,292,0,2*Math.PI,true);
				ctx.stroke();
				ctx.save();
				ctx.rotate(2 * Math.PI / 6 * timer.getSeconds()+ 2 * Math.PI / 6000 * timer.getMilliseconds());
				ctx.translate(0, 28.5);
				ctx.drawImage(moon, -3.5, -3.5);
				ctx.restore();
				ctx.restore();
				window.requestAnimationFrame(draw);
				
			}
			
		</script>
	</body>
</html>
